---
title: InlineCode
description: InlineCode provides styling for short snippets of code within text content, such as variable names, function names, or short commands.
source: 'sentry/components/core/code'
status: stable
resources:
  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/inlineCode/index.tsx
  a11y:
    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
    WCAG 1.4.4: https://www.w3.org/TR/WCAG22/#resize-text
---

import {InlineCode} from 'sentry/components/core/code/inlineCode';
import {Text} from 'sentry/components/core/text';
import {Prose} from 'sentry/components/core/text/prose';
import * as Storybook from 'sentry/stories';

import documentation from '!!type-loader!@sentry/scraps/code/inlineCode';

export {documentation};

The `<InlineCode>` component is designed for displaying short code snippets inline with text, such as variable names, function calls, or brief commands. It provides consistent monospace typography and subtle visual styling that distinguishes code from regular text.

```jsx
<Text>
  Use the <InlineCode>useState</InlineCode> hook to manage component state.
</Text>
```

## Basic Usage

Use `<InlineCode>` to highlight code elements within sentences or paragraphs.

<Storybook.Demo>
  <Text>
    The <InlineCode>console.log()</InlineCode> function outputs messages to the browser
    console.
  </Text>
</Storybook.Demo>
```jsx
<Text>
  The <InlineCode>console.log()</InlineCode> function outputs messages to the browser
  console.
</Text>
```

## Within Prose Content

For long form content, `<code>` elements are automatically styled within the [`<Prose>`](/stories/text/prose) component.

<Storybook.Demo>
  <Prose>
    <h2>Getting Started</h2>
    <p>
      To initialize a new React component, you'll need to import <code>React</code> from
      the <code>react</code> package. Then define your component using either the
      <code>function</code> keyword or as an arrow function.
    </p>
    <p>
      Remember to export your component using <code>export default MyComponent</code>
      so it can be imported elsewhere in your application.
    </p>
  </Prose>
</Storybook.Demo>
```jsx
<Prose>
  <h2>Getting Started</h2>
  <p>
    To initialize a new React component, you'll need to import <code>React</code> from the{' '}
    <code>react</code> package. Then define your component using either the
    <code>function</code> keyword or as an arrow function.
  </p>
  <p>
    Remember to export your component using <code>export default MyComponent</code>
    so it can be imported elsewhere in your application.
  </p>
</Prose>
```

## Common Use Cases

`<InlineCode>` is perfect for:

<Storybook.Demo>
  <Prose>
    <ul>
      <li>
        Variable names: <InlineCode>userName</InlineCode> or{' '}
        <InlineCode>isLoading</InlineCode>
      </li>
      <li>
        Function names: <InlineCode>handleSubmit()</InlineCode> or{' '}
        <InlineCode>fetchData()</InlineCode>
      </li>
      <li>
        CSS properties: <InlineCode>display: flex</InlineCode> or{' '}
        <InlineCode>margin: 0</InlineCode>
      </li>
      <li>
        File paths: <InlineCode>/src/components/Button.tsx</InlineCode>
      </li>
      <li>
        Package names: <InlineCode>@sentry/react</InlineCode> or{' '}
        <InlineCode>lodash</InlineCode>
      </li>
      <li>
        HTML attributes: <InlineCode>className</InlineCode> or{' '}
        <InlineCode>onClick</InlineCode>
      </li>
    </ul>
  </Prose>
</Storybook.Demo>
```jsx
<ul>
  <li>
    Variable names: <InlineCode>userName</InlineCode> or{' '}
    <InlineCode>isLoading</InlineCode>
  </li>
  <li>
    Function names: <InlineCode>handleSubmit()</InlineCode> or{' '}
    <InlineCode>fetchData()</InlineCode>
  </li>
  <li>
    CSS properties: <InlineCode>display: flex</InlineCode> or{' '}
    <InlineCode>margin: 0</InlineCode>
  </li>
  <li>
    File paths: <InlineCode>/src/components/Button.tsx</InlineCode>
  </li>
  <li>
    Package names: <InlineCode>@sentry/react</InlineCode> or{' '}
    <InlineCode>lodash</InlineCode>
  </li>
  <li>
    HTML attributes: <InlineCode>className</InlineCode> or{' '}
    <InlineCode>onClick</InlineCode>
  </li>
</ul>
```

<Storybook.Demo>
  <Prose>
    <p>
      When documenting API endpoints, use <InlineCode>POST /api/events</InlineCode> for
      the endpoint itself, but use a CodeSnippet component for showing the full request
      example:
    </p>
    <Text size="sm" variant="muted">
      (CodeSnippet would go here for multi-line code examples)
    </Text>
    <p>
      For non-code monospace content like user IDs, you can use{' '}
      <Text as="span" monospace>
        usr_1234567890
      </Text>
      instead of InlineCode.
    </p>
  </Prose>
</Storybook.Demo>
```jsx
<Text>
  When documenting API endpoints, use <InlineCode>POST /api/events</InlineCode> for the
  endpoint itself, but use CodeSnippet for multi-line examples.
</Text>
<Text>
  For non-code content like user IDs, use <Text monospace>usr_1234567890</Text> instead.
</Text>
```

## Related Components

For different code display needs, consider these alternatives:

- [**`<CodeBlock>`**](/stories/core/code-block): Use for multi-line code snippets with syntax highlighting
- [**`<Prose>`**](/stories/typography/prose): Use for long-form content that may contain code elements
- [**`<Text monospace>`**](/stories/typography/text#monospace): Use for monospace text that isn't necessarily code

## Accessibility

`<InlineCode>` renders as a semantic `<code>` element, which provides appropriate meaning to screen readers and other assistive technologies. The component maintains sufficient color contrast to meet WCAG 2.2 AA requirements.
